<template>
  <div>
    <!-- <h1>已购</h1> -->
    <div class="pur">
      <div class="purhead">
        <div
          class="iconfont icon-fanhuipt"
          @click="$router.push('/userInfo')"
        ></div>
        <p>已购</p>
      </div>

      <van-tabs v-model="active" animated>
        <van-tab :title="'数字专辑'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>暂无购买的数字专辑</p>
          </div>
        </van-tab>

        <van-tab :title="'单曲'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>暂无购买的单曲</p>
          </div>
        </van-tab>

        <van-tab :title="'播客'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>暂无购买的播客</p>
          </div>
        </van-tab>

        <van-tab :title="'视频'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>暂无购买的视频</p>
          </div>
        </van-tab>

        <van-tab :title="'线上演出'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>暂无已购的线上演出门票</p>
          </div>
        </van-tab>

        <van-tab :title="'礼品卡'">
            <div class="gift">
              <van-tabs type="card">
                <van-tab title="我购买的">
                  <div class="purcontent">
                    <div class="iconfont icon-box"></div>
                    <p>暂无购买的礼品卡</p>
                  </div>
                </van-tab>

                <van-tab title="我收到的">
                  <div class="purcontent">
                    <div class="iconfont icon-box"></div>
                    <p>暂无收到的礼品卡</p>
                  </div></van-tab
                >
              </van-tabs>
          </div>
        </van-tab>

        <van-tab :title="'演出'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>暂无购买的演出</p>
          </div>
        </van-tab>

        <van-tab :title="'直播特权'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>没有加入粉团及守护的主播</p>
          </div>
        </van-tab>

        <van-tab :title="'乐谱'">
          <div class="purcontent">
            <div class="iconfont icon-box"></div>
            <p>您还没有购买乐谱哦</p>
            <span>快去寻找更多歌曲乐谱吧~</span>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  created() {
    this.$emit("getnavs-btn", false);
  },
};
</script>

<style lang="less">
.pur {
  width: 100%;
  .purhead {
    width: 100%;
    min-height: 30px;
    line-height: 30px;
    font-size: 20px;
    background-color: #d44439;
    color: #fff;
    text-align: center;
    display: flex;
    padding: 8px 0px;
    box-sizing: border-box;
    text-align: center;
    .iconfont {
      flex: 0 0 30px;
    }
    p {
      flex: 1;
      padding-right: 30px;
      text-align: center;
    }
  }
  .purcontent {
    width: 210px;
    text-align: center;
    margin: 100px auto;
    color: #aaa;
    .iconfont {
      font-size: 120px;
    }
    p {
      font-size: 14px;
      margin-bottom: 10px;
    }
    span {
      font-size: 13px;
      color: #bbb;
    }
  }
  .gift{
    padding-top: 15px;
  }
}
</style>